<template>
  <div>
    <div class="home" v-if="isIndex">
      <div class="mapLeft" :style="dynamicStyle">
        <div class="header mapHeader">
          <el-button type="primary" round>普通模式</el-button>
          <el-icon style="color: white;" @click="handleCalendar">
            <Calendar />
          </el-icon>
        </div>
        <MapComponent ref="mapRef" class="mapContent" :rightIsShow="isShow" :showtoolbox="showbox"
          :showswitchbox="showbox" @refresh="refreshList" :getAllIds="getAllIds" :getAllTaskInfo="getAllTaskInfo" />
        <div class="uavBox" v-if="djShow">
          <div class="headerBox">
            <div class="logo">
              <svg-icon icon-class="logo-dji" />
            </div>
            <div class="title">
              <span>{{ currentDock?.dockname || '机场1' }}</span>
              <span>{{ currentDock?.duiwu || '10队' }}</span>
            </div>
            <div class="now">
              <div>
                <el-tag :type="currentDock?.status === '1' ? 'success' : 'info'" size="small" round>{{
                  currentDock?.status === '1' ? '作业中' : '空闲中' }}</el-tag>
              </div>
              <div class="toShow" @click="handleView(currentDock)">详情</div>
              <div style="margin-left: 5px;" @click="handleClose">
                <el-icon style="color: white;">
                  <Close />
                </el-icon>
              </div>
            </div>
          </div>
          <div class="workBox">
            <div class="up">
              <div style="width: 50%;display: flex;align-items: center;">
                <el-icon style="color: green;">
                  <Document />
                </el-icon>
                <span class="taskName">{{ currentDock?.taskName || '暂无任务' }}</span>
              </div>
              <div class="info">
                <span style="font-size: 10px;color: #525252;">暂无告警信息</span>
              </div>
            </div>
            <div class="down" style="display: flex; flex-direction: row; justify-content: space-between;">

              <div style="display: flex; flex-direction: row;align-items: center;">
                <div>
                  <svg-icon icon-class="drone" />
                </div>
                <div style="margin-left: 6px;">
                  {{ currentDock?.droneName || 'Matrice 3TD' }}
                </div>
                <div style="margin-left: 10px;">
                  <el-tag :type="currentDock?.uavstatus === '在线' ? 'success' : 'info'" size="small" effect="dark">{{
                    currentDock?.uavstatus || '离线' }}</el-tag>
                </div>
                <div style="margin-left: 10px;">
                  <el-tag type="primary" size="small">90%</el-tag>
                </div>

              </div>


              <div class="qf" style="margin-left: 0px;">
                一键起飞
              </div>
            </div>
          </div>
          <div class="videoBox" style="background: red;height: 250px;">
            <webrtc-play style="width: 100%; height: 100%" url="webrtc://111.15.191.198:1985/live/dock2"></webrtc-play>
          </div>
          <div class="monitorBox">
            <div>
              风速 1.2m/s
            </div>
            <div>
              雨量 无
            </div>
            <div>
              舱内温度 27.3°
            </div>
          </div>

        </div>

        <!-- 无人机面板 -->
        <div class="uavBox2" v-if="dronePanelShow">
          <div class="headerBox">
            <div class="logo">
              <svg-icon icon-class="logo-dji" />
            </div>
            <div class="title">
              <span>{{ currentDrone?.droneName || 'Matrice 3TD' }}</span>
              <span>{{ currentDrone?.droneOrg || '朝阳山防火巡检' }}</span>
            </div>
            <div class="now">
              <div>
                <el-icon class="icon-btn" color="#409EFF">
                  <InfoFilled />
                </el-icon>航线飞行
              </div>
              <div class="toShow" @click="handleView(currentDrone)">详情</div>
              <div style="margin-left: 5px;" @click="handleDronePanelClose">
                <el-icon style="color: white;">
                  <Close />
                </el-icon>
              </div>
            </div>
          </div>
          <div class="workBox">
            <div class="up">
              <div style="width: 50%;display: flex;align-items: center;">
                <el-icon style="color: green;">
                  <Document />
                </el-icon>
                <span class="taskName">{{ currentDrone?.taskName || '复合巡检' }}</span>
              </div>
              <div style="margin-left: 10px;">
                <el-tag type="primary" size="small">90%</el-tag>
              </div>
              <div class="info">
                <span style="font-size: 10px;color: #525252;">暂无告警信息</span>
              </div>
            </div>
            <div class="down">
              <div style="margin-left: 6px; color: #fff; font-size: 12px;">
                控制权
              </div>
              <div class="control-options">
                <div class="control-option" :class="{ active: controlType === 'drone' }"
                  @click="switchControl('drone')">无人机</div>
                <div class="control-option" :class="{ active: controlType === 'gimbal' }"
                  @click="switchControl('gimbal')">云台</div>
              </div>

              <div class="qf">
                一键返航
              </div>
              <div class="qf2">
                急停
              </div>
            </div>
          </div>

          <!-- 状态信息栏 -->
          <div class="status-info-bar">
            <div class="status-icons">
              <div class="status-icon-item">
                <span>RTK</span>
              </div>
              <div class="status-icon-item">
                <span>4G</span>
              </div>
              <div class="status-icon-item">
                <span>61%</span>
              </div>
            </div>
            <div class="video-quality">
              <el-dropdown @command="handleVideoQualityChange" trigger="click">
                <div class="quality-btn">
                  {{ videoQuality }} <el-icon style="font-size: 10px; margin-left: 3px;">
                    <ArrowDown />
                  </el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="超清">超清</el-dropdown-item>
                    <el-dropdown-item command="高清">高清</el-dropdown-item>
                    <el-dropdown-item command="标清">标清</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>

          <div class="videoBox" style="background: red;height: 215px;">
            <webrtc-play style="width: 100%; height: 100%" url="webrtc://111.15.191.198:1985/live/dock2"></webrtc-play>
          </div>
          <div class="monitorBox">
            <div class="param-item">
              <span class="param-label">HS</span>
              <span class="param-value">8.2↑</span>
            </div>
            <div class="param-item">
              <span class="param-label">D</span>
              <span class="param-value">1923.7</span>
            </div>
            <div class="param-item">
              <span class="param-value">9.9</span>
            </div>
            <div class="param-item">
              <span class="param-label">H</span>
              <span class="param-value">124.8 H</span>
            </div>
            <div class="param-item">
              <span class="param-label">VS</span>
              <span class="param-value">↓ 8.9 m/s</span>
            </div>
          </div>

        </div>

      </div>
      <div class="boxRight" :style="{ width: (isShow ? 265 + 'px' : 0) }">
        <div class="arrowBox">
          <div class="arrow" @click="handleShow">
            <el-icon v-if="isShow">
              <ArrowRight />
            </el-icon>
            <el-icon v-if="!isShow">
              <ArrowLeft />
            </el-icon>
          </div>
        </div>
        <div>
          <el-tabs v-model="activeTab" class="demo-tabs">
            <el-tab-pane label="设备" name="device">
              <div class="search-box">
                <el-input v-model="searchText" placeholder="搜索" prefix-icon="Search" clearable
                  @keyup.enter="handleSearch" @clear="handleSearch" />
              </div>
              <div v-if="deviceList.length === 0" class="empty-tip">
                暂无在线设备
              </div>
              <div v-for="item in deviceList" :key="item.id">
                <!-- 机场卡片 -->
                <div class="device-item" @click="handleShowDockPanel(item)">
                  <div class="device-info">
                    <div class="dockName">{{ item.dockname }}</div>
                    <div class="team-info">{{ item.duiwu || '10队' }}</div>
                    <div class="statusBox" style="display: flex;">
                      <el-tag :type="item.status === '1' ? 'primary' : 'info'" effect="dark" size="small">{{ item.status
                        ===
                        '1' ? '作业中' : '空闲' }}</el-tag>
                      <div style="margin-left: 10px;">{{ item.taskName || '暂无任务' }}</div>
                    </div>
                    <div class="statusBox" style="display: flex;">
                      <el-tag :type="item.uavstatus === '在线' ? 'success' : 'info'" effect="dark" size="small">{{
                        item.uavstatus }}</el-tag>
                      <div style="margin-left: 10px;">{{ item.droneName || 'DJI-M300-001' }}</div>
                    </div>
                  </div>
                  <div class="location-btn" @click.stop="handleLocate(item)">
                    <el-icon style="color: white;">
                      <Promotion />
                    </el-icon>
                  </div>
                </div>

                <!-- 无人机卡片,仅当无人机在线时显示 -->
                <div v-if="item.uavstatus === '在线'" class="device-item uav-item" @click="handleShowDronePanel(item)">
                  <div class="device-info">
                    <div class="flex-row">
                      <div class="status-indicator">
                        <el-icon class="status-icon" color="#67c23a">
                          <CircleCheck />
                        </el-icon>
                      </div>
                      <div class="dockName">{{ item.droneName }}</div>
                      <el-tag v-if="item.alarmCount" type="danger" size="small" class="alarm-tag">{{ item.alarmCount ||
                        4
                      }}</el-tag>
                    </div>
                    <div class="team-info">{{ item.droneOrg }} <el-icon>
                        <Location />
                      </el-icon></div>
                    <div class="statusBox battery-row">
                      <el-tag type="success" effect="dark" size="small">在线</el-tag>
                      <div style="margin-left: 10px;">{{ item.droneModel || 'Matrice 3TD' }}</div>
                      <!-- <div class="battery-info">
                      <span>{{ item.batteryPercent  }}</span>
                    </div> -->
                    </div>
                  </div>
                  <div class="location-marker" @click.stop="handleLocate(item)">
                    <el-icon class="marker-large" color="#67c23a">
                      <Location />
                    </el-icon>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="人员" name="second">
              <div>
                <div style="border-bottom: 1px solid rgba(255, 255, 255, .15);padding: 16px 10px;">
                  <el-input v-model="input" style="width: 240px" placeholder="搜索" class="input-with-select">
                    <template #append>
                      <el-button :icon="Search" />
                    </template>
                  </el-input>
                </div>
                <div>

                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <el-dialog v-model="dialogTableVisible" title="日程" width="1000">
        <div class="calendar-header">
          <el-date-picker v-model="selectedDate" type="month" placeholder="选择日期" @change="handleDateChange"
            value-format="YYYY-MM" />
        </div>
        <div class="enlarged-calendar">
          <FullCalendar :options="calendarOptions" ref="calendarRef" />
        </div>
      </el-dialog>
      <!-- 任务详情对话框 -->
      <el-dialog title="任务详情" v-model="eventDialogVisible" width="800px" append-to-body>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="任务名称">{{ form.taskName }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
          <el-descriptions-item label="任务状态">{{ statusFormat(form) }}</el-descriptions-item>
          <el-descriptions-item label="执行类型">{{ execTypeFormat(form) }}</el-descriptions-item>
          <el-descriptions-item label="执行机场">{{ form.dockName }}</el-descriptions-item>
          <el-descriptions-item label="航线名称">{{ form.fpName }}</el-descriptions-item>
          <el-descriptions-item label="执行时间">
            {{ form.execType === '2' ?
              (form.execCycle === '1' ? '每天 ' :
                form.execCycle === '2' ? '每周 ' :
                  form.execCycle === '3' ? '每月 ' : '') +
              (form.cycleTime ? formatCycleTimes(form.cycleTime) : '') :
              formatExecTimes(form.execTime)
            }}
          </el-descriptions-item>
          <el-descriptions-item label="返航高度">{{ form.returnHeight }}米</el-descriptions-item>
          <el-descriptions-item label="航线失控动作">{{ form.failAction === '0' ? '退出航线并返航' : '继续执行航线任务'
          }}</el-descriptions-item>
          <el-descriptions-item label="续飞模式">{{
            form.continueMode === '0' ? '自动续飞' :
              form.continueMode === '1' ? '手动续飞' : '不续飞'
          }}</el-descriptions-item>
          <el-descriptions-item label="AI巡检">
            <el-tag v-if="form.aiPerson === '1'" size="small" style="margin-right: 4px">行人</el-tag>
            <el-tag v-if="form.aiVehicle === '1'" size="small" style="margin-right: 4px">车辆</el-tag>
            <el-tag v-if="form.aiFire === '1'" size="small" style="margin-right: 4px">火点</el-tag>
            <el-tag v-if="form.aiSmoke === '1'" size="small">烟雾</el-tag>
          </el-descriptions-item>
          <el-descriptions-item v-if="form.execType === '2'" label="执行周期">
            <span>
              {{ form.execCycle === '1' ? '每天' :
                form.execCycle === '2' ? '每周' :
                  form.execCycle === '3' ? '每月' : ''
              }}
              {{ form.cycleTime ? formatCycleTimes(form.cycleTime) : '' }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item v-if="form.execType === '2'" label="默认直播镜头">
            {{ form.cameraType === '0' ? '广角镜头' : '变焦镜头' }}
          </el-descriptions-item>
        </el-descriptions>

        <div style="margin: 20px 0">
          <el-divider content-position="left">执行记录</el-divider>
        </div>

        <!-- 执行记录表格 -->
        <div v-if="execRecords && execRecords.length > 0">
          <el-table :data="execRecords" style="margin-top: 20px;" v-loading="execRecordLoading">
            <el-table-column label="任务记录ID" align="center" prop="recordId" />
            <el-table-column label="执行时间" align="center" prop="execTime">
              <template #default="scope">
                <span>{{ parseTime(scope.row.execTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="执行状态" align="center" prop="status">
              <template #default="scope">
                <el-tag :type="execStatusTypeMap[scope.row.status]">
                  {{ execStatusMap[scope.row.status] }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="信息" align="center" prop="errorMsg" show-overflow-tooltip />
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button @click="handleViewRecord(scope.row)" type="text" size="small" style="color: #409eff;">
                  <el-icon>
                    <VideoPause />
                  </el-icon>
                  <span>查看</span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 执行记录分页 -->
          <div class="pagination-container" style="margin-top: 15px;">
            <pagination v-show="execRecordTotal > 0" :total="execRecordTotal" :page="execRecordQuery.pageNum"
              :limit="execRecordQuery.pageSize" :page-sizes="[5, 10, 20, 50]"
              @pagination="handleExecRecordPagination" />
          </div>
        </div>
        <el-empty v-else description="暂无执行记录" />
      </el-dialog>
    </div>
    <div class="work" v-if="!isIndex">
      <div class="topbox">
        <div
          style="display: flex;color: white;width: 200px;width: auto;justify-content: space-between;align-items: center;">
          <div style="cursor: pointer;"><el-icon @click="handleBack" style="color: white;">
              <ArrowLeftBold />
            </el-icon></div>
          <div>{{ currentTask?.droneName || '--' }}</div>
          <div class="into" style="margin-left: 12px;"><el-icon @mouseenter="handleMoEnter" @mouseleave="handleMoLeave"
              style="margin-right:24px;cursor: pointer; margin-top: 4px; ">
              <InfoFilled />
            </el-icon></div>
          <div>{{ currentTask?.taskName || '暂无任务' }}</div>
        </div>
        <div style="display: flex;color: white;align-items: center">
          <el-icon style="margin-left: 6px;">
            <QuestionFilled />
          </el-icon>
          <span style="font-size: 12px;margin-left: 10px;">控制权</span>
          <div class="qf" style="margin-left: 10px;" @click="handleDrone"
            :style="{ background: (droneShow ? '#409eff' : '') }">
            无人机
          </div>
          <div class="qf" style="margin-left: 10px;" @click="handleYt"
            :style="{ background: (ytShow ? '#409eff' : '') }">
            云台
          </div>
          <div class="qf" style="margin-left: 10px;">
            一键返航
          </div>
          <div class="qf" style="background: rgb(237, 137, 18);margin-left: 10px;">
            急停
          </div>
          <el-icon style="color: white;margin-left: 10px;" @click="handleMore">
            <MoreFilled />
          </el-icon>
        </div>
      </div>
      <div>
        <div class="boxLeft">
          <div style="height: 210px;">
            <webrtc-play style="width: 100%; height: 100%" url="webrtc://111.15.191.198:1985/live/dock2"></webrtc-play>
          </div>
          <div style="width: 100%;height: 32px;background: #1a1a1a;display: flex;align-items: center;">
            <el-icon style="color: white;margin-left: 10px;">
              <Coordinate />
            </el-icon>
            <span style="margin-left: 10px;font-size: 13px;">120.08895°E, 35.914362°N</span>
          </div>
          <div style="display: flex;height: 230px;width: 100%;">
            <div style="display: flex;width: 50%;flex-direction: column;">
              <div class="baseBox">
                <div class="title">
                  <el-icon>
                    <Aim />
                  </el-icon>
                  <span style="margin-left: 5px;">GNSS</span>
                </div>
                <div style="display: flex;">
                  <div style="width: 50%;display: flex;flex-direction: column;margin-top: 6px;">
                    <div style="height: 50%;">0</div>
                    <div style="height: 50%;">
                      <svg-icon icon-class="signal" style="height: 25px;width: 25px;" />
                    </div>
                  </div>
                  <div style="width: 50%;display: flex;flex-direction: column;margin-top: 6px;">
                    <div style="height: 50%;">-- FIX</div>
                    <div style="font-size: 22px;height: 50%;margin-top: 10px;">RTK</div>
                  </div>
                </div>
              </div>
              <div class="baseBox">
                <div class="title">
                  <el-icon>
                    <Coin />
                  </el-icon>
                  <span style="margin-left: 5px;">电池</span>
                </div>
                <div style="margin-top: 10px;">
                  <div style="font-size: 10px;">--V --℃</div>
                  <div style="margin-top: 6px;font-size: 22px;line-height: 22px;font-weight: 700;color: #fff;">--%</div>
                </div>
              </div>
              <div class="baseBox">
                <div class="title">
                  <el-icon>
                    <TrendCharts />
                  </el-icon>
                  <span style="margin-left: 5px;">海拔高度</span>
                </div>
                <div style="margin-top:26px;font-size: 22px;line-height: 22px;font-weight: 700;color: #fff;">
                  0.0m
                </div>
              </div>
            </div>
            <div style="display: flex;width: 50%;flex-direction: column;margin-left: 3px;">
              <div class="baseBox" style="">
                <div class="title">
                  <el-icon>
                    <Cpu />
                  </el-icon>
                  <span style="margin-left: 5px;">图传</span>
                </div>
                <div style="margin-top:20px;display: flex;width: 90%;justify-content: space-between;">
                  <svg-icon icon-class="signal" style="height: 25px;width: 25px;" />
                  <div style="font-size: 22px;line-height: 22px;font-weight: 700;color: #fff;">4G</div>
                  <svg-icon icon-class="signal" style="height: 25px;width: 25px;" />
                </div>
              </div>
              <div class="baseBox" style="height: 66%; position: relative;cursor: pointer;"
                @mouseenter="xianshijiaodu = true" @mouseleave="xianshijiaodu = false">
                <!-- 飞行数据仪表盘 横滚角 俯仰角-->
                <div class="jiaodushow" v-show="xianshijiaodu">
                  <div class="jiaodushow_item">
                    <div class="jiaodushow_item_tit">横滚角：</div>
                    <div class="jiaodushow_item_name">{{ hgrollangle }}°</div>
                  </div>
                  <div class="jiaodushow_item">
                    <div class="jiaodushow_item_tit">俯仰角：</div>
                    <div class="jiaodushow_item_name">{{ fypitchangle }}°</div>
                  </div>
                </div>

                <!-- <Attitude class="indicator-bg flight-Attitude" :size="165" :roll="roll" :pitch="pitch" /> -->
                <flightAttitude class="indicator-bg flight-Attitude" :size="165" :hgroll="hgrollangle"
                  :fypitch="fypitchangle" />

              </div>
            </div>
          </div>
          <!-- <div style="justify-content: space-evenly;width: 100%;height: 50px;background: #1a1a1a;display: flex;align-items: center;margin-top: 10px;font-size: 12px;flex-direction: column;"> -->
          <div
            style="justify-content: space-evenly;width: 100%;height: 50px;background: #1a1a1a;display: flex;align-items: center;margin-top: 10px;font-size: 12px;">
            <div style="display: flex;flex-direction: row; justify-items: center;align-items: center;">
              <span style="width:10px; height: 3px; background: green; margin-right:4px; "></span>
              <span>相对起飞点高度(m)：102.6</span>
            </div>
            <div style="display: flex;flex-direction: row; justify-items: center;align-items: center;">
              <span style="width:10px; height: 3px; background: #1177fb; margin-right:4px; "></span> <span>
                地速(m/s)：20.5</span>
            </div>
          </div>
        </div>
        <div>
          <MapComponent ref="mapRef" class="mapContent" :rightIsShow="isShow" :showtoolbox="showbox"
            :showswitchbox="showbox" @refresh="refreshList" :getAllIds="getAllIds" :getAllTaskInfo="getAllTaskInfo"
            :style="{ width: (ytShow ? 98 + 'vw' : 100 + 'vw') }" />
          <div class="yt" v-if="ytShow" :style="{ width: (ytShow ? 2 + 'vw' : 0 + 'vw') }">
            <div class="t10">
              <el-icon>
                <Camera />
              </el-icon>
            </div>
            <div class="t10">
              <el-icon>
                <FullScreen />
              </el-icon>
            </div>
            <div class="t10">—</div>
            <div class="t10" style="font-size: 10px;">
              <span>广角</span>
            </div>
            <div class="t10" style="font-size: 12px;">
              <span>1x</span>
            </div>
            <div class="t10" style="display: flex;flex-direction: column;align-items: center">
              <el-icon style="background: #3a3a3a;">
                <CaretTop />
              </el-icon>
              <div style="display: flex;margin-top: 2px;font-size: 10px;">
                <el-icon style="background: #3a3a3a;">
                  <CaretLeft />
                </el-icon>
                <el-icon style="background: #3a3a3a;">
                  <CaretRight />
                </el-icon>
              </div>
              <el-icon style="background: #3a3a3a;margin-top: 2px;">
                <CaretBottom />
              </el-icon>
            </div>
            <div class="t10">
              <el-icon>
                <HelpFilled />
              </el-icon>
            </div>
          </div>
          <div class="dock" @click="handleDock" v-if="!dockShow">
            <el-icon>
              <Shop />
            </el-icon>
            <div>详情</div>
          </div>
          <!-- 起飞确认弹窗 -->
          <div v-if="showTakeoffDialog" class="takeoff-dialog">
            <div class="dialog-content">
              <div class="dialog-header">
                <h3 class="dialog-title">一键起飞</h3>
                <el-icon class="close-btn" @click="cancelFly">
                  <Close />
                </el-icon>
              </div>
              <div class="dialog-divider"></div>
              <div class="neirong">
                <div class="form-item">
                  <label>纬度:</label>
                  <el-input v-model="takeoffParams.lat" placeholder="输入纬度" />
                </div>
                <div class="form-item">
                  <label>经度:</label>
                  <el-input v-model="takeoffParams.lng" placeholder="输入经度" />
                </div>
                <div class="form-item">
                  <label>高度(m):</label>
                  <el-input v-model="takeoffParams.height" placeholder="输入高度" />
                </div>
                <div class="form-item">
                  <label>安全起飞高度(m):</label>
                  <el-input v-model="takeoffParams.safetyTakeoffHeight" placeholder="输入安全起飞高度" />
                </div>
                <div class="form-item">
                  <label>安全返航高度(m):</label>
                  <el-input v-model="takeoffParams.safetyReturnHeight" placeholder="输入安全返航高度" />
                </div>
                <div class="form-item">
                  <label>遥控器失控动作:</label>
                  <el-select v-model="takeoffParams.remoteControlAction" placeholder="选择动作">
                    <el-option v-for="dict in remote_control" :key="dict.value" :label="dict.label" :value="dict.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="form-item">
                  <label>航线失控动作:</label>
                  <el-select v-model="takeoffParams.flightFailAction" placeholder="选择动作">
                    <el-option v-for="dict in airline_control" :key="dict.value" :label="dict.label"
                      :value="dict.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="form-item">
                  <label>返航模式:</label>
                  <el-select v-model="takeoffParams.returnMode" placeholder="选择模式">
                    <el-option v-for="dict in return_mode" :key="dict.value" :label="dict.label" :value="dict.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="form-item">
                  <label>指点飞行失控动作:</label>
                  <el-select v-model="takeoffParams.pointFailAction" placeholder="选择动作">
                    <el-option v-for="dict in flyloss_control" :key="dict.value" :label="dict.label"
                      :value="dict.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="form-item">
                  <label>指点飞行模式:</label>
                  <el-select v-model="takeoffParams.pointMode" placeholder="选择模式">
                    <el-option v-for="dict in airplane_mode" :key="dict.value" :label="dict.label" :value="dict.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="form-item">
                  <label>指点飞行高度(m):</label>
                  <el-input v-model="takeoffParams.pointHeight" placeholder="输入高度" />
                </div>
              </div>
              <div class="dialog-buttons">
                <el-button size="small" @click="cancelFly">cancel</el-button>
                <el-button type="primary" size="small" @click="takeOffToPoint">ok</el-button>
              </div>
            </div>
          </div>

          <!-- 远程调试弹窗 -->
          <div v-if="showControlDialog" class="control-dialog">
            <div class="control-wrapper">
              <div class="control-header">
                <h3 class="title">远程调试</h3>
                <el-icon class="close-btn" @click="cancelControl">
                  <Close />
                </el-icon>
              </div>
              <div class="control-body">

                <div class="zuo">
                  <div class="cao">
                    <div>机场面板</div>
                    <div class="biaoliang">重启</div>
                    <div class="biaoliang">格式化</div>
                  </div>
                  <div class="grid-item">
                    <span>补光灯</span>
                    <span class="status">关闭</span>
                  </div>
                  <div class="grid-item">
                    <span>电池存储箱</span>
                    <span class="status">应急</span>
                  </div>
                  <div class="grid-item">
                    <span>声光报警</span>
                    <span class="status">关闭</span>
                  </div>
                  <div class="grid-item">
                    <span>舱盖</span>
                    <span class="status">关闭</span>
                  </div>
                  <div class="grid-item">
                    <span>空调</span>
                    <span class="status">空闲</span>
                  </div>
                </div>

                <div class="you">
                  <div class="cao">
                    <div>飞行器面板</div>
                    <div class="biaoliang2">格式化</div>
                  </div>
                  <div class="grid-item">
                    <span>飞行器</span>
                    <span class="status">关机</span>
                  </div>
                  <div class="grid-item">
                    <span>充电</span>
                    <span class="status">关闭</span>
                  </div>
                  <div class="grid-item">
                    <span>电池保养状态</span>
                    <span class="status">关闭</span>
                  </div>
                  <div class="grid-item">
                    <span>4G图传</span>
                    <span class="status">关闭</span>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <div class="uavdockBox" v-if="showContent">
            <div style="height: 80%;width: 100%;display: flex;border-bottom: 1px solid;">
              <div class="ibox">
                <div>
                  <el-icon>
                    <Notification />
                  </el-icon>
                </div>
                <div>--</div>
                <div class="la">设备编号：</div>
                <div>--</div>
                <div class="la">产品序列号：</div>
                <div>--</div>
                <div class="la">所属组织：</div>
                <div>--</div>
              </div>
              <div class="ibox">
                <div>
                  <el-icon>
                    <Notification />
                  </el-icon>
                </div>
                <div>--</div>
                <div class="la">设备编号：</div>
                <div>--</div>
                <div class="la">产品序列号：</div>
                <div>--</div>
                <div class="la">所属组织：</div>
                <div>--</div>
              </div>
            </div>
            <div style="height: 20%;width: 100%;padding:10px 20px;">
              <div style="display: flex;align-items: center;">
                <el-icon>
                  <Key />
                </el-icon>
                <span style="color: #5f5f5f;font-size: 15px;margin-left: 6px;">上传渠道：</span>
                <span>--</span>
              </div>
              <div style="margin-top: 2px;display: flex;align-items: center;">
                <el-icon>
                  <Iphone />
                </el-icon>
                <span style="color: #5f5f5f;font-size: 15px;margin-left: 6px;">终端信息：</span>
                <span>--</span>
              </div>
            </div>
          </div>
          <div class="dockView" v-if="dockShow">
            <div class="headerBox">
              <div class="logo">
                <svg-icon icon-class="logo-dji" />
              </div>
              <div class="title">
                <span>机场1</span>
                <div>
                  <el-tag type="success" size="small" round>空闲中</el-tag>
                </div>
                <span style="margin-left: 6px;color: white;font-size: 12px;">10队</span>
              </div>
              <div class="now">
                <div style="margin-left: 5px;" @click="handleDock">
                  <el-icon style="color: white;">
                    <DArrowLeft />
                  </el-icon>
                </div>
              </div>
            </div>
            <div class="workBox">
              <div class="down">
                <div
                  style="width: 300px;height: 20px;background: rgba(255, 255, 255, .06);display: flex;align-items: center;justify-content: space-between;">
                  <svg-icon icon-class="signal" style="height: 25px;width: 25px;" />
                  <span>RTK</span>
                  <span>34</span>
                  <span>FIX</span>
                  <span>
                    <el-icon>
                      <UploadFilled />
                    </el-icon>
                    <span>0.07/76.28G </span>
                  </span>
                  <span>
                    <el-icon>
                      <Sell />
                    </el-icon>
                    <span>0</span>
                  </span>
                  <el-tag type="primary" size="small">90%</el-tag>
                </div>
                <div class="qf" @click="() => { showTakeoffDialog = true; showControlDialog = false }"
                  style="background: rgb(237, 137, 18); margin-left: 100px;">
                  一键起飞
                </div>
                <div class="qf" @click="() => { showControlDialog = true; showTakeoffDialog = false }"
                  style="background: rgb(17, 119, 251); margin-left: 10px;">
                  远程调试
                </div>
                <el-icon style="margin-left: 6px;">
                  <QuestionFilled />
                </el-icon>
              </div>
            </div>
            <div class="videoBox" style="background: red;height: 399px;">
              <webrtc-play style="width: 100%; height: 100%"
                url="webrtc://111.15.191.198:1985/live/dock2"></webrtc-play>
            </div>
            <div class="monitorBox">
              <div>
                风速 1.2m/s
              </div>
              <div>
                雨量 无
              </div>
              <div>
                降水预报 无雨
              </div>
              <div style="display: flex;align-items: center;">
                <span style=" margin-right:20px;"> 舱内温度 27.3° </span>
                <div style=" margin-top: 2px; cursor: pointer;" @mouseenter="handlebanbenEnter"
                  @mouseleave="handlebanbenLeave">
                  <el-icon>
                    <Tickets />
                  </el-icon>
                </div>
              </div>
            </div>
            <!-- 电压 温度 以及版本 -->
            <div class="qwbanbenBox" v-if="showdyqwbanben">
              <!-- <div class="qwbanbenBox"> -->
              <div class="banbenitembox">
                <div class="itembox_titlebt">市电电压</div>
                <div class="itembox_title">{{ dyqwbanbenParams.sddy }}V</div>
              </div>
              <div class="banbenitembox">
                <div class="itembox_titlebt">工作电压</div>
                <div class="itembox_title">{{ dyqwbanbenParams.gzdy }}V</div>
              </div>
              <div class="banbenitembox">
                <div class="itembox_titlebt">工作电流</div>
                <div class="itembox_title">{{ dyqwbanbenParams.gzdl }}A</div>
              </div>
              <div class="banbenitembox">
                <div class="itembox_titlebt">电池保养</div>
                <div class="itembox_title">{{ dyqwbanbenParams.dcby }}</div>
              </div>
              <div class="banbenitembox" style="margin-top: 25px;">
                <div class="itembox_titlebt">气温</div>
                <div class="itembox_title">{{ dyqwbanbenParams.qw }}°C</div>
              </div>
              <div class="banbenitembox">
                <div class="itembox_titlebt">空调模式</div>
                <div class="itembox_title">{{ dyqwbanbenParams.ktms }}</div>
              </div>
              <div class="banbenitembox" style="margin-top: 25px;">
                <div class="itembox_titlebt">固件版本</div>
                <div class="itembox_title">{{ dyqwbanbenParams.gjbb }}</div>
              </div>
              <div class="banbenitembox">
                <div class="itembox_titlebt">序列号</div>
                <div class="itembox_title">{{ dyqwbanbenParams.xlh }}</div>
              </div>
            </div>
          </div>




          <div class="speed">
            <div v-if="droneShow" class="keyboard-container">
              <div class="keyboard-row">
                <div class="key-spacer"></div>
                <div class="keyboard-key" :class="{ 'active-key': keyStates.w }">W</div>
                <div class="key-spacer"></div>
              </div>
              <div class="keyboard-row">
                <div class="keyboard-key" :class="{ 'active-key': keyStates.a }">A</div>
                <div class="keyboard-key" :class="{ 'active-key': keyStates.s }">S</div>
                <div class="keyboard-key" :class="{ 'active-key': keyStates.d }">D</div>
              </div>
            </div>
            <div>WS {{ droneSpeed.vertical.toFixed(1) }}</div>
            <div>D {{ droneSpeed.yaw.toFixed(1) }}</div>
            <div>{{ droneSpeed.forward.toFixed(1) }} m/s</div>
            <div>{{ currentHeight.toFixed(1) }} H</div>
            <div>{{ droneSpeed.vertical.toFixed(1) }} VS</div>
            <div v-if="droneShow" class="keyboard-container">
              <div class="keyboard-row">
                <div class="key-spacer"></div>
                <div class="keyboard-key" :class="{ 'active-key': keyStates.up }">↑</div>
                <div class="key-spacer"></div>
              </div>
              <div class="keyboard-row">
                <div class="keyboard-key" :class="{ 'active-key': keyStates.left }">←</div>
                <div class="keyboard-key" :class="{ 'active-key': keyStates.down }">↓</div>
                <div class="keyboard-key" :class="{ 'active-key': keyStates.right }">→</div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <SpeakerPanel v-model:showMoreMenu="showMoreMenu" />
    </div>
  </div>
</template>

<script setup name="Index">
import MapComponent from "@/components/MapComponent/index.vue";
import { getPointTaskList } from "@/api/drawtask/point/pointTask.js";
import { getLineTaskList } from "@/api/drawtask/line/lineTask.js";
import { getSurfaceTaskList } from "@/api/drawtask/surface/surfaceTask.js";
import defaultNoFlyZone from '@/assets/resData/defaultNoFlyZone.json';
import { ref, computed, watch, onMounted, getCurrentInstance, onUnmounted } from "vue";
const { proxy } = getCurrentInstance();
import { Search, ArrowRight, ArrowLeft, Close, Document, Promotion, Calendar, Location, CircleCheck, InfoFilled, VideoPause, ArrowDown } from '@element-plus/icons-vue'
import WebrtcPlay from '@/components/webRTC/webrtcPlay.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import SpeakerPanel from '@/components/SpeakerPanel/index.vue'
import { listOnlineDevices } from "@/api/equipment/dock_info";

import trackData from '@/assets/resData/track.json';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import zhCn from '@fullcalendar/core/locales/zh-cn';

import { listTask, getTask, addTask, updateTask, delTask, pauseTask, stopTask, getTaskExecRecords, getMonthlySchedule } from '@/api/uavTask/task'


import dayjs from 'dayjs'
import { useDict } from "@/utils/dict.js";
import { debounce } from 'lodash'
//import { Airspeed, Attitude, Altimeter, Heading, Variometer } from 'vue-flight-indicators';
import flightAttitude from '@/components/Vue-Flight-Indicators/Attitude.vue';
const xianshijiaodu = ref(false);//显示角度
const hgrollangle = ref(0);//横滚角
const fypitchangle = ref(0);//俯仰角

const hgrollanglelist = ref([3.1, 1.7, 6.2, 2.1, 4.3, 6.8, 5.0, 5.3, 4.1, 7.6, 19.3, -0.2, -0.6, -1.3, -6.8, -6.3, -7.9, -7.4, -11.0, -12.9, -11.7, -10.0, -11.2, -11.5, -9.4, -10.6, -2.3, -7.3, 6.9, -1.6, -1.3, -1.8, -1.9, -2.9, -0.2, -0.5, 0.1, 1.4, 0.2, 0, -0.1, -0.4, 1.7, -0.3, -0.8, 0, -0.2, -0.3, -0.2, -0.4, 0, 0.2, 0.4, 0.1, 4.1, 0.1, -0.2, -0.3, -1.1, -1.2, -0.2, 0.4, -1.3, -1.8, 0.1, -2.3]) //横滚角
const fypitchanglelist = ref([1.4, 0.2, 0.2, -2.1, 0, -0.1, -0.9, 0.2, -0.4, -2.7, -12.2, -4.8, 12.3, -12.2, -18.8, -10.1, -11.3, -13.1, -11.8, -9.9, -12.0, -9.4, -13.1, -9.4, -9.2, -12.7, -13.7, -10.6, -4.4, -12.6, -0.6, 14.8, -5.4, -1.7, -12.7, -19.4, -13.5, -11.7, -10.9, -11.2, -9.6, 8.8, 10.4, -12.5, -19.9, -12.0, -11.6, -11.7, -11.5, -11.2, -11.7, -12.9, 0.8, 13.0, -22.7, -20.6, -17.4, -11.3, -10.5, -12.0, -11.2, -11.1, -10.1, 0.4, 12.0, -13.7]);//俯仰角
// const hgrollanglelist = ref([3.1, 1.7, 6.2, ]) //横滚角
// const fypitchanglelist = ref([-1.4, -6.2, -5.2,]);//俯仰角

let interval;
const countnum = ref(0);
const startInterval = () => {
  ///debugger
  interval = setInterval(() => {
    // roll.value = 30 * Math.sin(counter.value / 10);
    // pitch.value = 10 * Math.sin(counter.value / 20);
    //debugger
    if (countnum.value <= hgrollanglelist.value.length) {

    } else {
      countnum.value = 0;
    }
    hgrollangle.value = hgrollanglelist.value[countnum.value];
    fypitchangle.value = fypitchanglelist.value[countnum.value];
    countnum.value++;
  }, 3000);
};



const form = ref({});

const { task_exec_type, task_exec_cycle, task_status, remote_control, airline_control, return_mode, flyloss_control, airplane_mode } =
  useDict('task_exec_type', 'task_exec_cycle', 'task_status', 'remote_control', 'airline_control', 'return_mode', 'flyloss_control', 'airplane_mode')
const execRecords = ref([])
const execRecordLoading = ref(false)
const execRecordTotal = ref(0)

// 获取执行记录
const getExecRecords = async () => {
  if (!execRecordQuery.value.taskId) return
  execRecordLoading.value = true
  try {
    const response = await getTaskExecRecords(execRecordQuery.value)
    if (response.code === 200) {
      // debugger
      execRecords.value = response.rows
      execRecordTotal.value = response.total
    }
  } catch (error) {
    console.error('获取执行记录失败:', error)
    execRecords.value = []
    execRecordTotal.value = 0
    ElMessage.error('获取执行记录失败')
  } finally {
    execRecordLoading.value = false
  }
}

// 处理执行记录分页
const handleExecRecordPagination = (val) => {
  execRecordQuery.value.pageNum = val.page
  execRecordQuery.value.pageSize = val.limit
  getExecRecords()
}

// 执行状态映射
const execStatusMap = {
  '0': '开始执行',
  '1': '执行完成',
  '2': '执行失败',
  '3': '任务暂停',
  '4': '任务终止'
}

// 执行状态对应的标签类型
const execStatusTypeMap = {
  '0': 'primary',
  '1': 'success',
  '2': 'danger',
  '3': 'warning',
  '4': 'info'
}

const execRecordQuery = ref({
  pageNum: 1,
  pageSize: 5,  // 修改默认每页显示数量为5
  taskId: undefined
})
// 格式化任务状态
const statusFormat = (row) => {
  const status = task_status.value.find(item => item.value === row.status)
  return status ? status.label : ''
}

// 格式化执行类型
const execTypeFormat = (row) => {
  const execType = task_exec_type.value.find(item => item.value === row.execType)
  return execType ? execType.label : ''
}

const formatCycleTimes = (times) => {
  if (!times) return '';
  try {
    // 如果是字符串，尝试解析为JSON
    const timeArray = typeof times === 'string' ? JSON.parse(times) : times;
    if (Array.isArray(timeArray)) {
      return timeArray.map(time => {
        if (typeof time === 'string') {
          // 对于周期执行，只显示时和分
          if (time.includes('T') || time.includes(' ')) {
            const date = new Date(time);
            return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
          }
          return time;
        }
        return '';
      }).filter(t => t).join(', ');
    }
  } catch (e) {
    console.error('Error parsing cycleTime:', e);
  }
  return '';
}

const formatExecTimes = (times) => {
  if (!times) return '';
  try {
    // 如果是字符串，尝试解析为JSON
    const timeArray = typeof times === 'string' ? JSON.parse(times) : times;
    if (Array.isArray(timeArray)) {
      return timeArray.map(time => {
        if (typeof time === 'string') {
          return formatTime(time);
        }
        return '';
      }).filter(t => t).join(', ');
    }
  } catch (e) {
    console.error('Error parsing execTime:', e);
  }
  return '';
}

// 在 script setup 部分添加新的格式化函数
const formatTime = (time) => {
  if (!time) return '';
  try {
    // 如果是完整的日期时间字符串，根据执行类型显示不同格式
    if (time.includes('T') || time.includes(' ')) {
      const date = new Date(time);
      // 返回完整的日期时间格式 YYYY-MM-DD HH:mm
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    }
    // 如果已经是时分格式，直接返回
    return time;
  } catch (e) {
    console.error('Error formatting time:', e);
    return time;
  }
}
const formatToYearMonth = (date) => {
  return dayjs(date).format('YYYY-MM')
}
//  listTask().then(res => {

// })

const handleViewRecord = (record) => {
  isIndex.value = false
  setTimeout(() => {
    mapRef.value.loadDroneTrack(trackData);
    // 播放
    mapRef.value.playTrack();
  }, 1000);
}

/* // 控制播放速度
mapRef.value.setTrackSpeed(2); // 2倍速

// 暂停
mapRef.value.pauseTrack();

// 停止
mapRef.value.stopTrack();

// 清除轨迹
mapRef.value.clearTrack(); */


const selectedDate = ref('');
const handleDateChange = async (month) => {
  // debugger
  debounceFetch(month)
  const calendarApi = calendarRef.value.getApi();
  calendarApi.gotoDate(month + '-01');
};


// 新增：统一获取数据的函数
const fetchCalendarData = async (month) => {
  try {
    // const newDate = date - 24 * 60 * 60 * 1000
    // const yearMonth = formatToYearMonth(newDate)
    const now = new Date()
    const res = await getMonthlySchedule({ yearMonth: month }) // 传递参数
    // debugger
    const tasks = res.data || []
    const events = tasks.map(task => ({
      // id: task.taskId,
      title: task.taskName, // 包含任务名称和时间
      start: task.execTime,
      extendedProps: {
        isPast: new Date(task.execTime) < now, // 增加过期状态
        taskId: task.taskId
      }
      // end: task.endTime,
      // extendedProps: {
      //   type: task.taskType,
      //   description: task.description
      // }
    }))

    calendarOptions.value.events = events

  } catch (error) {
    ElMessage.error('获取日程数据失败: ' + error.message)
  }
}
// 事件弹窗控制 & 当前点击事件数据
const eventDialogVisible = ref(false);
const currentEvent = ref(null);

// 添加防抖函数
const debounceFetch = debounce((month) => {
  fetchCalendarData(month)
}, 300)

// 日历配置（响应式）
const calendarOptions = ref({
  plugins: [dayGridPlugin],  // 加载插件
  locale: zhCn,
  initialView: 'dayGridMonth', // 默认视图（月视图）
  contentHeight: 700, // 固定高度
  aspectRatio: 1.5,   // 更宽的宽高比
  // timeZone: 'UTC', // 或 'local' 根据需求
  // eventTimeFormat: { // 显示时间格式
  //   hour: '2-digit',
  //   minute: '2-digit',
  //   hour12: false
  // },
  // fixedWeekCount: false,
  // dayMaxEventRows: 3,
  // eventDisplay: 'list',       // 事件以列表形式显示
  // dayMaxEvents: 5,
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: '', // 切换视图按钮
  },
  events: [],

  // 添加事件点击回调
  eventClick: async (info) => {
    try {
      const taskId = info.event.extendedProps.taskId;
      const res = await getTask(taskId); // 传递taskId
      form.value = res.data;
      // debugger
      eventDialogVisible.value = true;

      // 加载执行记录
      execRecordQuery.value.taskId = taskId;
      await getExecRecords();

    } catch (error) {
      ElMessage.error('获取任务详情失败: ' + error.message);
    }
    //   const res1 = await getMonthlySchedule({ yearMonth }) // 传递参数
    //   // debugger
    //   const tasks = res1.data || []
    //   const res = await getTask(); // 调用任务详情接口
    //   form.value = res.data;
    //   eventDialogVisible.value = true;
    // } catch (error) {
    //   ElMessage.error('获取任务详情失败');
    // }
  },


  datesSet: (dateInfo) => {
    // 获取视图实际显示的月份第一天
    const viewMonth = dayjs(dateInfo.view.currentStart).format('YYYY-MM') // 转换为YYYY-MM格式
    if (dialogTableVisible.value) {
      debounceFetch(viewMonth)
    }
  },
  height: 'auto',// 高度自适应

  eventDidMount: (info) => {
    const isPast = info.event.extendedProps.isPast
    const dotElement = info.el.querySelector('.fc-event-dot')

    if (isPast) {
      // 添加过期样式
      info.el.classList.add('past-event')
      if (dotElement) {
        dotElement.style.backgroundColor = '#ff4d4f'
      }
    }
  }
}
);



const mapWidth = ref(319)
const mapRef = ref(null);
const dialogTableVisible = ref(false)
const dynamicStyle = computed(() => ({
  width: `calc(100vw - ${mapWidth.value}px)`
}))
const activeTab = ref('device')

const isShow = ref(true)
const showbox = ref(true)
const handleShow = () => {
  if (isShow.value) {
    mapWidth.value = 54
  } else {
    mapWidth.value = 319
  }
  isShow.value = !isShow.value
}

const handleClick = () => {

}

const ytShow = ref(false)
const droneShow = ref(false)


const dockShow = ref(false)

const handleDock = () => {
  dockShow.value = !dockShow.value
}

const isIndex = ref(true)

const handleView = (item) => {
  isIndex.value = false
  currentTask.value = item
}

const handleBack = () => {
  isIndex.value = true
}

const djShow = ref(false)

// 设备列表相关变量和方法
const deviceList = ref([])
const searchText = ref('')
const loading = ref(false)

// 获取设备列表
const getDeviceList = async () => {
  try {
    loading.value = true
    const res = await listOnlineDevices({
      name: searchText.value
    })
    deviceList.value = res.rows || []
    loading.value = false
  } catch (error) {
    console.error('获取设备列表失败:', error)
    loading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  getDeviceList()
}

// 定位处理
const handleLocate = (device) => {
  // 跳转到设备位置实现
  console.log('定位到设备:', device)
  // 如果地图组件有引用,可以调用其方法
  // mapRef.value.flyToPolygon([device.longitude, device.latitude])
  mapRef.value.flyToPolygon([120.151837, 35.971190]);

}

// 在组件挂载时获取设备列表
onMounted(() => {
  getDeviceList()

startInterval();//定时的仪表盘
})

//一键起飞弹窗变量
const showTakeoffDialog = ref(false);
//远程控制弹窗变量
const showControlDialog = ref(false);
// 新增起飞参数对象
const takeoffParams = ref({
  lat: '',
  lng: '',
  height: '',
  safetyTakeoffHeight: '',
  safetyReturnHeight: '',
  remoteControlAction: '',
  flightFailAction: '',
  returnMode: '',
  pointFailAction: '',
  pointMode: '',
  pointHeight: ''
});
//飞机的电压 气温 以及版本号
const showdyqwbanben = ref(false);
const dyqwbanbenParams = ref({
  sddy: '226',//市电电压
  gzdy: '28.0',//工作电压
  gzdl: '0.0',//工作电流
  dcby: '无需保养',//电池保养
  qw: '17.7',//气温
  ktms: '空闲模式',//空调模式
  gjbb: '10.01.3205',//固件版本号
  xlh: '7xtdm6f00bp948',//序列号
});
const handlebanbenEnter = () => {
  //鼠标移入 显示飞机的电压 气温 以及版本号
  showdyqwbanben.value = true
}
const handlebanbenLeave = () => {
  //鼠标移除 隐藏飞机的电压 气温 以及版本号
  showdyqwbanben.value = false
}
// 表单重置
const reset = () => {
  takeoffParams.value = {
    lat: '',
    lng: '',
    height: '',
    safetyTakeoffHeight: '',
    safetyReturnHeight: '',
    remoteControlAction: '',
    flightFailAction: '',
    returnMode: '',
    pointFailAction: '',
    pointMode: '',
    pointHeight: ''
  };
}
//取消起飞
const cancelFly = () => {
  showTakeoffDialog.value = false;
  reset();
}
//取消远程调控
const cancelControl = () => {
  showControlDialog.value = false;
  reset();
}
// 一键起飞
const takeOffToPoint = () => {
  proxy.$modal.msgSuccess("操作成功");
  showTakeoffDialog.value = false;
  //将高度传给后台再给无人机发指令，无人机实时传递经纬度高度再给前端，前端再地图上根据经纬度高度渲染无人机的位置
  const points = [
    { lng: "120.151888992496", lat: "35.971217673299", alt: 10 },
    { lng: "120.151888992496", lat: "35.971217673299", alt: 20 },
    { lng: "120.151888992496", lat: "35.971217673299", alt: 30 },
    { lng: "120.151888992496", lat: "35.971217673299", alt: 40 },
    { lng: "120.151888992496", lat: "35.971217673299", alt: 50 },
    { lng: "120.151888992496", lat: "35.971217673299", alt: 60 },
    { lng: "120.151888992496", lat: "35.971217673299", alt: 60 },
    { lng: "120.151935418990", lat: "35.971322906685", alt: 60 },
    { lng: "120.151813678406", lat: "35.971349730882", alt: 60 },
    { lng: "120.151264814080", lat: "35.971226958598", alt: 60 },
    { lng: "120.151280289578", lat: "35.970970065332", alt: 60 },
    { lng: "120.151966078682", lat: "35.971093022715", alt: 60 }
  ].map(p => ({
    lng: parseFloat(p.lng),
    lat: parseFloat(p.lat),
    alt: p.alt
  }));

  let currentPointIndex = 0;
  const moveInterval = 2000; // 移动间隔时间（毫秒）

  // 初始化第一个点
  const droneEntity = mapRef.value.drawgDroneModel(points[0]);

  // 设置定时器循环移动到下一个点
  const timer = setInterval(() => {
    currentPointIndex++;
    if (currentPointIndex >= points.length) {
      clearInterval(timer);
      return;
    }
    mapRef.value.updateDronePosition(droneEntity, points[currentPointIndex]);
  }, moveInterval);
  reset();
};
const calendarRef = ref(null);
const handleWcClick = () => {
  djShow.value = true
}

const handleClose = () => {
  djShow.value = false
}

const handleInnerClick = () => {
  mapRef.value.flyToPolygon([120.151837, 35.971190]);
};

const refreshList = () => {
  getList();
};

const handleMark = () => {
  // 保存默认机场实体的引用
  const droneEntity = mapRef.value.drawgPointImg({ lng: 120.151837, lat: 35.971190, alt: 50 });
  mapRef.value.setDefaultDroneImg(droneEntity); // 设置默认机场实体
  const stationEntity = mapRef.value.drawExistingCircle(120.151837, 35.971190, 7000)
  mapRef.value.setDefaultStation(stationEntity); // 设置默认机站实体
  // mapRef.value.flyToPolygon([120.151837,35.971190]);
}

const showContent = ref(false);
const debounceTimer = ref(null);

// const handleMo = () =>{
//   clearTimeout(debounceTimer);
//   showContent.value = !showContent.value
//   debounceTimer.value = setTimeout(() => {
//     showContent.value = !showContent.value
//   }, 200);
// }
const handleMoEnter = () => {
  showContent.value = true;
}
const handleMoLeave = () => {
  showContent.value = false;
}



const handleYt = () => {
  ElMessageBox.confirm(
    '确定申请云台控制权?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '申请成功',
      })
      ytShow.value = true
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消了',
      })
    })
}


const handleDrone = () => {
  ElMessageBox.confirm(
    '确定申请无人机控制权?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '申请成功',
      })
      droneShow.value = true
      controlActive.value = true;
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消了',
      })
    })
}


const getList = async () => {
  const pointTaskList = await getPointTaskList()
  mapRef.value.drawPoint(pointTaskList)
  const lineTaskList = await getLineTaskList()
  mapRef.value.drawLine(lineTaskList)
  const surfaceTaskList = await getSurfaceTaskList()
  mapRef.value.drawSurface(surfaceTaskList)
  console.log(pointTaskList, lineTaskList, surfaceTaskList)
}

// 获取所有图形ID传给地图组件批量删除
const getAllIds = async () => {
  try {
    const [pointTaskList, lineTaskList, surfaceTaskList] = await Promise.all([
      getPointTaskList(),
      getLineTaskList(),
      getSurfaceTaskList()
    ]);
    const pointIds = pointTaskList.rows.map(item => item.id);
    const lineIds = lineTaskList.rows.map(item => item.id);
    const surfaceIds = surfaceTaskList.rows.map(item => item.id);
    return { pointIds, lineIds, surfaceIds };
  } catch (error) {
    console.error('获取任务列表时出错:', error);
    return { pointIds: [], lineIds: [], surfaceIds: [] };
  }
};

//获取所有点线面任务的名称、颜色、总长/面积
// 在首页组件中修改getAllTaskInfo
const getAllTaskInfo = async () => {
  try {
    const [pointTaskList, lineTaskList, surfaceTaskList] = await Promise.all([
      getPointTaskList(),
      getLineTaskList(),
      getSurfaceTaskList()
    ]);
    const pointInfo = pointTaskList.rows.map(item => ({
      id: item.id.toString(),  // 确保ID是字符串
      name: item.pointName,
      color: item.pointColor,
    }));
    const lineInfo = lineTaskList.rows.map(item => ({
      id: item.id.toString(),
      name: item.lineName,
      color: item.lineColor,
      totalLength: item.lineLength
    }));
    const surfaceInfo = surfaceTaskList.rows.map(item => ({
      id: item.id.toString(),
      name: item.surfaceName,
      color: item.surfaceColor,
      totalArea: item.surfaceArea
    }));
    return { pointInfo, lineInfo, surfaceInfo };
  } catch (error) {
    console.error('获取任务信息时出错:', error);
    return { pointInfo: [], lineInfo: [], surfaceInfo: [] };
  }
};
// 在获取地图组件引用后加载默认数据
watch(mapRef, (newVal) => {
  if (newVal) {
    // 加载默认禁飞区
    mapRef.value.loadDefaultNoFlyZones(defaultNoFlyZone);
    // 原有获取列表数据
    getAllIds();
    getList();
    getAllTaskInfo();
    handleMark()
  }
});
// 新增状态变量
const showMoreMenu = ref(false)
// 新增事件处理函数
const handleMore = () => {
  showMoreMenu.value = !showMoreMenu.value
}


// 当前选中的机场信息
const currentDock = ref(null)

// 处理机场面板显示
const handleShowDockPanel = (item) => {
  currentDock.value = item
  djShow.value = true
}

// 无人机面板相关
const dronePanelShow = ref(false)
const currentDrone = ref(null)
const currentTask = ref(null)
const droneVideoUrl = ref("webrtc://111.15.191.198:1985/live/drone1")
const controlType = ref('drone') // 默认选中无人机控制
const videoQuality = ref('超清') // 默认视频画质

// 切换视频画质
const toggleVideoQuality = () => {
  // 在几种画质选项中循环切换
  if (videoQuality.value === '超清') {
    videoQuality.value = '高清'
  } else if (videoQuality.value === '高清') {
    videoQuality.value = '标清'
  } else {
    videoQuality.value = '超清'
  }
  console.log('切换视频画质至:', videoQuality.value)
}

// 下拉菜单选择视频画质
const handleVideoQualityChange = (quality) => {
  videoQuality.value = quality
  console.log('切换视频画质至:', quality)
}

// 切换控制权
const switchControl = (type) => {
  controlType.value = type
  console.log('切换控制权至:', type)
  // 这里可以添加其他控制权切换的逻辑
}

// 处理无人机面板显示
const handleShowDronePanel = (drone) => {
  currentDrone.value = drone
  dronePanelShow.value = true
}

// 关闭无人机面板
const handleDronePanelClose = () => {
  dronePanelShow.value = false
}

// 获取电池状态样式
const getBatteryType = (percent) => {
  if (percent <= 20) return 'danger'
  if (percent <= 50) return 'warning'
  return 'success'
}

const handleCalendar = async () => {
  dialogTableVisible.value = true;

  // 添加延迟确保日历组件已渲染
  await nextTick();

  const calendarApi = calendarRef.value.getApi();
  const currentDate = dayjs().startOf('month').toDate()

  // 直接跳转到当前月
  calendarApi.gotoDate(currentDate);

  // 强制刷新视图
  calendarApi.updateSize();
}

// 无人机控制状态
const keyStates = ref({
  w: false,
  a: false,
  s: false,
  d: false,
  up: false,
  down: false,
  left: false,
  right: false
});

// 无人机速度参数
const droneSpeed = ref({
  forward: 0,
  lateral: 0,
  vertical: 0,
  yaw: 0
});

// 无人机当前高度
const currentHeight = ref(0);

// 控制是否激活
const controlActive = ref(false);

// 控制循环计时器ID
let controlIntervalId = null;



// 处理按键按下事件
const handleKeyDown = (event) => {
  if (!droneShow.value || !controlActive.value) return;

  event.preventDefault(); // 防止默认行为（如滚动页面）

  // 更新按键状态
  switch (event.key.toLowerCase()) {
    case 'w':
      keyStates.value.w = true;
      droneSpeed.value.forward = 0.5; // 前进
      break;
    case 's':
      keyStates.value.s = true;
      droneSpeed.value.forward = -0.5; // 后退
      break;
    case 'a':
      keyStates.value.a = true;
      droneSpeed.value.lateral = -0.5; // 左移
      break;
    case 'd':
      keyStates.value.d = true;
      droneSpeed.value.lateral = 0.5; // 右移
      break;
    case 'arrowup':
      keyStates.value.up = true;
      droneSpeed.value.vertical = 0.5; // 上升
      break;
    case 'arrowdown':
      keyStates.value.down = true;
      droneSpeed.value.vertical = -0.5; // 下降
      break;
    case 'arrowleft':
      keyStates.value.left = true;
      droneSpeed.value.yaw = -45; // 左旋转
      break;
    case 'arrowright':
      keyStates.value.right = true;
      droneSpeed.value.yaw = 45; // 右旋转
      break;
  }
};

// 处理按键释放事件
const handleKeyUp = (event) => {
  if (!droneShow.value) return;

  // 更新按键状态
  switch (event.key.toLowerCase()) {
    case 'w':
      keyStates.value.w = false;
      if (!keyStates.value.s) droneSpeed.value.forward = 0;
      break;
    case 's':
      keyStates.value.s = false;
      if (!keyStates.value.w) droneSpeed.value.forward = 0;
      break;
    case 'a':
      keyStates.value.a = false;
      if (!keyStates.value.d) droneSpeed.value.lateral = 0;
      break;
    case 'd':
      keyStates.value.d = false;
      if (!keyStates.value.a) droneSpeed.value.lateral = 0;
      break;
    case 'arrowup':
      keyStates.value.up = false;
      if (!keyStates.value.down) droneSpeed.value.vertical = 0;
      break;
    case 'arrowdown':
      keyStates.value.down = false;
      if (!keyStates.value.up) droneSpeed.value.vertical = 0;
      break;
    case 'arrowleft':
      keyStates.value.left = false;
      if (!keyStates.value.right) droneSpeed.value.yaw = 0;
      break;
    case 'arrowright':
      keyStates.value.right = false;
      if (!keyStates.value.left) droneSpeed.value.yaw = 0;
      break;
  }
};




// 在onMounted中添加键盘监听
onMounted(() => {
  // 添加键盘事件监听
  window.addEventListener('keydown', handleKeyDown);
  window.addEventListener('keyup', handleKeyUp);

});

// 在onUnmounted中移除键盘监听
onUnmounted(() => {
  // 移除键盘事件监听
  window.removeEventListener('keydown', handleKeyDown);
  window.removeEventListener('keyup', handleKeyUp);

});
</script>

<style scoped lang="scss">
/* 自定义事件样式 */
:deep(.past-event) {
  background-color: #f5f5f5 !important;
  color: #999 !important;
  border-color: #ddd !important;
}

:deep(.fc-event-dot.past) {
  background-color: #ff4d4f !important;
}

:deep(.fc-event-time)::before {
  content: '';
  display: none !important;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

:deep(.past-event .fc-event-time)::before {
  background-color: #ff4d4f;
}

:deep(.future-event .fc-event-time)::before {
  background-color: #409eff;
}

:deep(.fc-event) {
  cursor: pointer;
  transition: background-color 0.2s;
}

:deep(.fc-event:hover) {
  background-color: #409eff !important;
  /* Element Plus 主色 */
}

//事件详情
.event-detail {
  line-height: 1.8;
}

.detail-item {
  margin: 10px 0;
}

.label {
  color: #606266;
  font-weight: 500;
}

/* 固定日历整体高度 */
:deep(.fc) {
  height: 700px !important;
  /* 根据需求调整 */
}

/* 固定单元格高度 */
:deep(.fc-daygrid-day-frame) {
  height: 100px !important;
  /* 单个单元格高度 */
  overflow: hidden !important;
}

/* 事件容器滚动条 */
:deep(.fc-daygrid-day-events) {
  overflow-y: auto !important;
  max-height: calc(100% - 20px);
  /* 留出日期数字的空间 */
  margin: 2px !important;
}

/* 事件项紧凑排列 */
:deep(.fc-daygrid-event) {
  margin: 1px 0 !important;
}

/* 隐藏多余的 "更多" 链接 */
:deep(.fc-daygrid-more-link) {
  display: none !important;
}

/* 全面放大日历 */
.enlarged-calendar :deep(.fc) {
  font-size: 16px;
}

.enlarged-calendar :deep(.fc-toolbar-title) {
  font-size: 1.8em;
}

.enlarged-calendar :deep(.fc-daygrid-day) {
  min-height: 80px;
}

.enlarged-calendar :deep(.fc-event) {
  font-size: 14px;
  padding: 3px 5px;
}

.enlarged-calendar :deep(.fc-button) {
  padding: 7px 15px;
  font-size: 14px;
}

// 日历头部
.calendar-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -35px;
}

.calendar-container {
  margin: 20px;
}

/* 覆盖 FullCalendar 默认样式（可选） */
:deep(.fc-event) {
  cursor: pointer;
}

.work {
  display: flex;
  width: 100%;
  position: relative;
  background-color: red;
  height: 100vh;

  .mapContent {
    position: absolute;
    height: calc(100vh - 50px);
    top: 50px;
    bottom: 50px;
    left: 276px;
    z-index: 999;
  }

  .yt {
    position: absolute;
    height: 100vh;
    top: 50px;
    bottom: 50px;
    right: 0px;
    z-index: 999999;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;

    .t10 {
      margin-top: 20px;
    }
  }

  .speed {
    font-size: 20px;
    height: 50px;
    width: 1000px;
    background-color: #19191a;
    position: absolute;
    bottom: 0px;
    width: calc(100vw - 276px);
    left: 276px;
    z-index: 9999999999;
    display: flex;
    color: white;
    align-items: center;
    justify-content: space-evenly;
  }

  .keyboard-key {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    font-size: 10px;
    margin: 1px;
  }

  .keyboard-row {
    display: flex;
    justify-content: center;
  }

  .keyboard-container {
    display: inline-block;
    background-color: transparent;
  }

  .key-spacer {
    width: 20px;
    height: 20px;
    margin: 1px;
  }

  .dock {
    font-size: 30px;
    height: 70px;
    width: 60px;
    background-color: #19191a;
    position: absolute;
    top: 60px;
    left: 279px;
    z-index: 9999999999;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #535353;
    box-shadow: 0 0 4px #434343e3;
    cursor: pointer;
    border-radius: 8px 8px 8px 0;

    div {
      font-size: 12px;
    }
  }

  .uavdockBox {
    width: 500px;
    height: 300px;
    background-color: #19191a;
    position: absolute;
    top: 60px;
    left: 100px;
    z-index: 9999999999;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    background: #1a1a1a;
    border-radius: 1px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 10px #000, inset 0 0 10px rgba(109, 124, 199, 0.2);
    flex-direction: column;

    .ibox {
      width: 50%;
      height: 100%;
      padding: 26px;

      .la {
        color: #5f5f5f;
        font-size: 15px;
        margin-top: 10px;
      }
    }
  }

  .qwbanbenBox {
    width: 250px;
    height: 280px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    // justify-content: space-around;
    color: #fff;
    border-radius: 8px;
    // border: 1px solid rgba(255, 255, 255, 0.3);
    // box-shadow: 0 0 10px #000, inset 0 0 10px rgba(109, 124, 199, 0.2);
    flex-direction: column;
    position: absolute;
    bottom: 50px;
    right: 20px;
    z-index: 999;


    .banbenitembox {
      width: 100%;
      display: flex;
      flex-direction: row;
      color: #f5f5f5;
      font-size: 14px;
      margin-top: 8px;
      letter-spacing: 1px;

      // margin: 0;
      // padding: 0;
      .itembox_title {
        width: calc(100% - 100px);
        text-align: left;
      }

      .itembox_titlebt {
        width: 100px;
        text-align: left;
      }
    }
  }

  .dockView {
    width: 600px;
    height: 500px;
    background-color: #19191a;
    position: absolute;
    top: 60px;
    left: 279px;
    z-index: 999;

    .headerBox {
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 16px;
      border-bottom: 1px solid rgba(84, 92, 114, .65);
      color: #535353;

      .title {
        display: flex;
        align-items: center;
        flex: 1;
        margin-left: 6px;

        > :first-child {
          display: inline-block;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          max-width: 112px;
          font-size: 14px;
          font-weight: 700;
          color: #fff;
        }

        > :nth-child(2) {
          margin-left: 8px;
          font-size: 12px;
          color: #afafaf;
          display: inline-block;
          max-width: 120px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .now {
        display: flex;
        align-items: center;

        .toShow {
          width: 35px;
          height: 17px;
          text-align: center;
          border-radius: 4px;
          box-sizing: border-box;
          border: 1px solid #d0d0d0;
          cursor: pointer;
          font-size: 10px;
          color: #fff;
          margin-left: 5px;
        }
      }
    }

    .workBox {
      width: 100%;
      height: 39px;
      padding: 5px 16px 0;

      .up {
        display: flex;
        justify-content: space-between;
        margin-top: 6px;

        .taskName {
          color: #535353;
          font-size: 14px;
          margin-left: 6px;
          width: 160px;
        }

        .info {
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          margin-left: 12px;
          z-index: 100;
          width: 100px;
          background: rgba(255, 255, 255, .08);
        }
      }

      .down {
        display: flex;
        margin-top: 6px;
        color: #ddd;
        font-size: 12px;
        align-items: center;

        .qf {

          font-size: 12px;
          height: 20px;
          padding: 1px 8px;
          line-height: 18px;
          width: 64px;
          cursor: pointer;
          border-radius: 2px;
          //margin-left: 160px;
        }
      }
    }

    .monitorBox {
      height: 20px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      color: #ddd;
      font-size: 12px;
    }
  }

  .topbox {
    width: 100%;
    height: 50px;
    background: #1a1a1a;
    box-shadow: inset 0 -1px #38425b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 18px;
    pointer-events: all;
    position: relative;
    z-index: 9;

    .qf {
      background: #494949;
      font-size: 12px;
      height: 20px;
      padding: 1px 8px;
      line-height: 18px;
      width: 64px;
      cursor: pointer;
      border-radius: 6px;
      margin-left: 160px;
      display: flex;
      justify-content: center
    }
  }


  .boxLeft {
    height: calc(100vh - 50px);
    top: 50px;
    height: 100vh;
    width: 276px;
    position: absolute;
    left: 0;
    background-color: black;
    z-index: 99999;
    color: white;

    .baseBox {
      width: 99%;
      height: 33%;
      font-size: 12px;
      line-height: 12px;
      color: rgb(175, 175, 175);
      padding: 8px;
      background: rgb(26, 26, 26);
      margin-top: 3px;

      .title {
        display: flex;
      }
    }

    .arrowBox {
      position: absolute;
      z-index: 3;
      left: -10px;
      display: flex;
      align-items: center;
      width: 10px;
      height: 100%;

      .arrow {
        display: flex;
        align-items: center;
        width: 10px;
        height: 46px;
        color: #fff;
        background: #151515;
        cursor: pointer;
        border-radius: 4px 0 0 4px;
        justify-content: center;
      }
    }

    :deep(.el-tabs__header) {
      .el-tabs__nav {
        .is-active {
          color: #409EFF;
        }
      }

      .el-tabs__item {
        color: #afafb0;
        padding: 0px;
      }
    }

    .itemBox:hover {
      border-left: 2px solid #1177FB;
      background: #28292a;
    }

    .itemBox {
      position: relative;
      padding: 10px 12px;
      width: 100%;
      color: #ffffffa6;
      cursor: pointer;
      border-left: 2px solid transparent;
      overflow: hidden;
      font-size: 12px;

      .dockName {
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #fff;
        line-height: 17px;
        font-weight: 700;
      }

      .statusBox {
        display: flex;
        align-items: center;
        height: 20px;
        margin-top: 8px;
        white-space: nowrap;
        line-height: 20px;
      }
    }
  }

  .jiaodushow {
    min-width: 130px;
    height: 60px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    // justify-content: space-around;
    color: #fff;
    border-radius: 8px;
    // border: 1px solid rgba(255, 255, 255, 0.3);
    // box-shadow: 0 0 10px #000, inset 0 0 10px rgba(109, 124, 199, 0.2);
    flex-direction: column;
    position: absolute;
    bottom: 150px;
    right: 10px;
    z-index: 999;

    .jiaodushow_item {
      width: 100%;
      display: flex;
      flex-direction: row;
      line-height: 22px;
      letter-spacing: 1px;

      .jiaodushow_item_tit {
        font-size: 13px;
        font-weight: 700;
      }

      .jiaodushow_item_name {
        font-size: 14px;
        font-weight: 400;
      }
    }
  }


}

.home {
  display: flex;
  width: 100%;
  position: relative;
  height: 100vh;

  .mapLeft {
    position: relative;

    .uavBox {
      width: 450px;
      height: 380px;
      background-color: #1a1a1a;
      z-index: 99;
      position: absolute;
      left: 10px;

      .headerBox {
        width: 100%;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        padding: 9px 16px;
        border-bottom: 1px solid rgba(84, 92, 114, .65);
        color: #535353;

        .title {
          display: flex;
          align-items: center;
          flex: 1;
          margin-left: 6px;

          > :first-child {
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 112px;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
          }

          > :nth-child(2) {
            margin-left: 8px;
            font-size: 12px;
            color: #afafaf;
            display: inline-block;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .now {
          display: flex;
          align-items: center;

          .toShow {
            width: 35px;
            height: 17px;
            text-align: center;
            border-radius: 4px;
            box-sizing: border-box;
            border: 1px solid #d0d0d0;
            cursor: pointer;
            font-size: 10px;
            color: #fff;
            margin-left: 5px;
          }
        }
      }

      .workBox {
        width: 100%;
        height: 70px;
        padding: 5px 16px 0;

        .up {
          display: flex;
          justify-content: space-between;
          margin-top: 6px;

          .taskName {
            color: #535353;
            font-size: 14px;
            margin-left: 6px;
            width: 160px;
          }

          .info {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            margin-left: 12px;
            z-index: 100;
            width: 100px;
            background: rgba(255, 255, 255, .08);
          }
        }

        .down {
          display: flex;
          margin-top: 10px;
          color: #ddd;
          font-size: 12px;
          align-items: center;

          .qf {
            background: rgb(237, 137, 18);
            font-size: 12px;
            height: 20px;
            padding: 1px 8px;
            line-height: 18px;
            width: 64px;
            cursor: pointer;
            border-radius: 10px;
            margin-left: 160px;
          }
        }
      }

      .monitorBox {
        height: 20px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        color: #ddd;
        font-size: 12px;
      }
    }


    .uavBox2 {
      width: 450px;
      // height: 40% ;
      background-color: #000;
      z-index: 99;
      position: absolute;
      left: 10px;
      top: 435px;
      overflow: hidden;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);

      .headerBox {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        background-color: #000;
        border-bottom: 1px solid #222;

        .logo {
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
        }

        .title {
          display: flex;
          align-items: center;
          flex: 1;
          margin-left: 6px;

          > :first-child {
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 112px;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
          }

          > :nth-child(2) {
            margin-left: 8px;
            font-size: 12px;
            color: #999;
            display: inline-block;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .now {
          display: flex;
          align-items: center;

          >div:first-child {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #fff;
          }

          .toShow {
            width: 35px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-radius: 2px;
            box-sizing: border-box;
            border: 1px solid #555;
            cursor: pointer;
            font-size: 12px;
            color: #fff;
            margin-left: 8px;
          }
        }
      }

      .workBox {
        width: 100%;
        padding: 8px 10px;
        background-color: #111;

        .up {
          display: flex;
          justify-content: space-between;
          align-items: center;

          >div:first-child {
            display: flex;
            align-items: center;
          }

          .taskName {
            color: #fff;
            font-size: 13px;
            margin-left: 6px;
          }

          .info {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            margin-left: auto;
            padding: 3px 6px;
            font-size: 10px;
            background: rgba(255, 255, 255, 0.08);
          }
        }

        .down {
          display: flex;
          margin-top: 10px;
          color: #fff;
          font-size: 12px;
          align-items: center;

          >div:first-child {
            color: #aaa;
            font-size: 12px;
          }

          .control-options {
            display: flex;
            margin-left: 5px;

            .control-option {
              padding: 2px 8px;
              margin-right: 5px;
              font-size: 12px;
              color: #aaa;
              background-color: #222;
              border-radius: 2px;
              cursor: pointer;

              &.active {
                color: #fff;
                background-color: #f90;
              }

              &:hover:not(.active) {
                background-color: #333;
              }
            }
          }

          .qf {
            background: #f90;
            font-size: 12px;
            height: 24px;
            padding: 0 10px;
            line-height: 24px;
            border-radius: 2px;
            margin-left: auto;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .qf2 {
            background: #f42;
            font-size: 12px;
            height: 24px;
            padding: 0 10px;
            margin-left: 6px;
            border-radius: 2px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      // 状态信息栏样式
      .status-info-bar {
        height: 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        background-color: #111;
        border-top: 1px solid #535353;
        border-bottom: 1px solid #535353;

        .status-icons {
          display: flex;
          align-items: center;

          .status-icon-item {
            display: flex;
            align-items: center;
            margin-right: 15px;
            font-size: 12px;
            color: #67c23a;
          }
        }

        .time-display {
          font-size: 12px;
          color: #fff;
          flex: 1;
          text-align: center;
        }

        .video-quality {
          .quality-btn {
            background-color: #1177fb;
            color: #fff;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 2px;
            cursor: pointer;
          }
        }
      }

      .videoBox {
        background: #000;
        height: 265px;
      }

      .monitorBox {
        height: 32px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        background-color: #111;

        .param-item {
          display: flex;
          align-items: center;
          color: #fff;
          font-size: 12px;

          .param-label {
            color: #999;
            margin-right: 4px;
          }

          .param-value {
            font-weight: 500;
          }
        }
      }
    }





    .mapContent {
      position: absolute;
      width: 100vw;
      height: 100vh;
      top: 48px;
      z-index: 4;
    }

    .mapHeader {
      width: 100%;
      position: relative;
      pointer-events: visible;
      display: flex;
      justify-content: space-between;
      padding: 0 24px;
    }

    .header {
      align-items: center;
      height: 48px;
      background: #232426;
      box-shadow: -2px 0 6px #0003;
      z-index: 999;
    }
  }

  .boxRight {
    height: 100vh;
    width: 266px;
    position: absolute;
    right: 0;
    background-color: black;
    z-index: 99999;

    .arrowBox {
      position: absolute;
      z-index: 3;
      left: -10px;
      display: flex;
      align-items: center;
      width: 10px;
      height: 100%;

      .arrow {
        display: flex;
        align-items: center;
        width: 10px;
        height: 46px;
        color: #fff;
        background: #151515;
        cursor: pointer;
        border-radius: 4px 0 0 4px;
        justify-content: center;
      }
    }

    :deep(.el-tabs__header) {
      .el-tabs__nav {
        .is-active {
          color: #409EFF;
        }
      }

      .el-tabs__item {
        color: #afafb0;
        padding: 0px;
      }
    }

    .itemBox:hover {
      border-left: 2px solid #1177FB;
      background: #28292a;
    }

    .itemBox {
      position: relative;
      padding: 10px 12px;
      width: 100%;
      color: #ffffffa6;
      cursor: pointer;
      border-left: 2px solid transparent;
      overflow: hidden;
      font-size: 12px;

      .dockName {
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #fff;
        line-height: 17px;
        font-weight: 700;
      }

      .statusBox {
        display: flex;
        align-items: center;
        height: 20px;
        margin-top: 8px;
        white-space: nowrap;
        line-height: 20px;
      }
    }
  }
}

/* 设备列表样式 */
.search-box {
  padding: 10px;
}

.device-item {
  position: relative;
  padding: 10px 12px;
  width: 100%;
  color: #ffffffa6;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  border-left: 2px solid transparent;
}

.device-item:hover {
  border-left: 2px solid #1177FB;
  background: #28292a;
}

.dockName {
  font-size: 14px;
  color: #fff;
  font-weight: 700;
}

.team-info {
  font-size: 12px;
  color: #ffffffa6;
  margin-top: 2px;
}

.statusBox {
  display: flex;
  align-items: center;
  height: 20px;
  margin-top: 8px;
}

.location-btn {
  background-color: #1177fb;
  min-width: 30px;
  width: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.empty-tip {
  text-align: center;
  padding: 20px;
  color: #ffffffa6;
  font-size: 14px;
}

/* 无人机卡片特殊样式 */
.uav-item {
  background-color: #222222;
  border-left: 2px solid transparent;
  padding: 8px 12px;
  margin-top: 1px;
}

.uav-item:hover {
  background-color: #28292a;
  border-left: 2px solid #1177FB;
}

.flex-row {
  display: flex;
  align-items: center;
}

.status-indicator {
  margin-right: 5px;
  display: flex;
  align-items: center;
}

.status-icon {
  font-size: 16px;
}

.alarm-tag {
  margin-left: 10px;
}

.uav-image {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drone-image {
  width: 100%;
  height: auto;
}

.battery-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.battery-info {
  margin-left: auto;
  color: #67c23a;
  font-weight: bold;
}

/* 新增定位图标样式 */
.location-marker {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-large {
  font-size: 24px;
}

// 无人机面板样式 - 重设计
.dronePanel {
  width: 380px;
  height: 380px;
  background-color: #000000;
  z-index: 99;
  position: absolute;
  left: 10px;
  top: 60px;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);

  .drone-header {
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background-color: #111111;
    border-bottom: 1px solid #222222;

    .drone-title {
      display: flex;
      align-items: center;

      span:first-child {
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        margin-right: 10px;
      }

      span:last-child {
        font-size: 12px;
        color: #999999;
      }
    }

    .drone-controls {
      display: flex;
      align-items: center;
      gap: 12px;

      .icon-btn {
        cursor: pointer;
      }

      .detail-btn {
        padding: 2px 8px;
        font-size: 12px;
        color: #fff;
        border: 1px solid #555;
        border-radius: 2px;
        cursor: pointer;
      }

      .close-btn {
        font-size: 18px;
        color: #fff;
        cursor: pointer;
        width: 20px;
        text-align: center;
      }
    }
  }

  .drone-body {
    flex: 1;
    display: flex;
    flex-direction: column;

    .progress-row {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      color: #fff;
      font-size: 12px;
      background-color: #111111;

      span {
        flex: 0 0 auto;
        margin-right: 10px;
      }

      .progress-bar {
        flex: 1;
        height: 4px;
        background-color: #333;
        border-radius: 2px;
        overflow: hidden;

        .progress-inner {
          height: 100%;
          background-color: #f90;
        }
      }

      .pause-btn {
        width: 30px;
        height: 30px;
        background-color: #f90;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        margin-left: 10px;
        cursor: pointer;
      }
    }

    .status-row {
      height: 30px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      background-color: #111111;

      .status-item {
        flex: 0 0 auto;
        color: #ccc;
        font-size: 12px;
      }

      .status-tags {
        flex: 1;
        display: flex;
        align-items: center;
        margin-left: 10px;

        .status-tag {
          display: inline-block;
          padding: 1px 5px;
          margin-right: 5px;
          font-size: 11px;
          color: #fff;
          background-color: #555;
          border-radius: 2px;

          &.rtk-tag {
            background-color: #67c23a;
          }

          &.battery-tag {
            background-color: #67c23a;
          }
        }
      }

      .time-display {
        flex: 0 0 auto;
        color: #fff;
        font-size: 12px;
      }
    }

    .video-area {
      flex: 1;
      background-color: #000;
    }

    .bottom-params {
      height: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      background-color: #111111;

      .param-item {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 12px;

        .param-label {
          color: #999;
          margin-right: 4px;
        }

        .param-value {
          font-weight: 500;
        }
      }
    }
  }
}

.takeoff-dialog {
  position: absolute;
  top: 387px;
  left: 1080px;
  transform: translate(-50%, -50%);
  padding: 20px;
  background: #19191a;
  border-radius: 0px;
  color: white;
  font-size: 14px;
  width: 400px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  /* 提高z-index确保在视频上层，999+1 反正比dockView层级高就行*/


  .dialog-content {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .dialog-header {
      display: flex;
      justify-content: space-between;

      .close-btn {
        color: #999;
        cursor: pointer;
        font-size: 18px;

        &:hover {
          color: #fff;
        }
      }
    }

    .neirong {
      background-color: #202020;
      padding: 20px;
      border-radius: 5px;
    }

    .dialog-title {
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      margin: 0;
      padding: 0;
    }

    .dialog-divider {
      height: 1px;
      background-color: #333;
      margin: 10px -20px 15px -20px;
      /* 使用负边距延伸到容器边缘 */
    }

    .form-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      label {
        width: 140px;
        text-align: left;
        /* 改为左对齐 */
        padding-right: 10px;
        color: #fff;
      }

      .el-input,
      .el-select {
        flex: 1;
      }
    }

    .dialog-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 15px;
    }
  }
}

.control-dialog {
  position: absolute;
  top: 263px;
  left: 1155px;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 550px;
  background: #1a1a1a;
  border-radius: 0px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

  .control-wrapper {
    .control-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #333;

      .title {
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        margin: 0;
      }

      .close-btn {
        color: #999;
        cursor: pointer;
        font-size: 18px;

        &:hover {
          color: #fff;
        }
      }
    }


    .cao {
      display: flex;
      gap: 20px;
      margin-bottom: 10px;
    }

    .zuo {
      padding: 10px;
      border-radius: 5px;
      margin-right: 10px;
      background-color: #222;
      width: 250px;

    }

    .you {
      padding: 10px;
      border-radius: 5px;
      margin-left: 10px;
      background-color: #222;
      width: 230px;
    }

    .biaoliang {
      background-color: #525252;
      margin-left: -2px;
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px;

      &:hover {
        background: #1177fb;
      }
    }

    .biaoliang2 {
      background-color: #525252;
      margin-left: 30px;
      padding-top: 4px;
      padding-bottom: 4px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px;

      &:hover {
        background: #1177fb;
      }
    }

    .control-body {
      display: flex;
      padding: 20px;

      .grid-item {
        background-color: #3a3a3a;
        margin: 10px;
        padding: 12px 16px;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 13px;

        &:hover {
          background: #1177fb;
        }

        .status {
          color: #999;
          font-size: 12px;
        }
      }

    }
  }
}

/* 确保下拉菜单可见 */
:deep(.el-select-dropdown) {
  z-index: 10000000 !important;
}

.active-key {
  background-color: #4CAF50;
  color: white;
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 键盘控制样式 */
.keyboard-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

.key-row {
  display: flex;
  margin: 2px 0;
}

.key {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  background-color: #f5f5f5;
  color: #333;
  font-weight: bold;
}

.key-spacer {
  width: 40px;
  height: 40px;
}

.active-key {
  background-color: #409EFF;
  color: white;
  border-color: #409EFF;
}

/* 修复el-time-picker的v-model指令 */
.time-picker :deep(.el-input__inner) {
  text-align: center;
}

/* 标签页五五分布样式 */
:deep(.el-tabs__nav) {
  width: 100%;
  /* 让标签导航栏占满整个宽度 */
}

:deep(.el-tabs__item) {
  width: 50%;
  /* 每个标签项占50%宽度 */
  text-align: center;
  /* 文字居中 */
  padding: 0;
  /* 移除默认内边距 */
}

/* 确保下拉菜单在弹窗上方显示 */
:deep(.el-popper) {
  z-index: 10000 !important;
}


.flight-Attitude {

  // ::v-deep {
  //   .indicator-box {
  //     position: absolute;
  //     top: -5px !important;
  //     left: -8px !important;
  //   }
  // }
  // :deep(.indicator-box) {
  //   position: absolute;
  //   top: -5px !important;
  //   left: -8px !important;
  // }
  margin-left: -12px;
  margin-top: -4px;

  :deep(img:nth-child(2)) {
    // 选择第二个子元素（若为 img）
    display: none !important;
  }

}
</style>
